<template>
  <div>
    <!-- 面包屑 -->
    <div class="crumbs">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-fold"></i> 首页</el-breadcrumb-item>
        <el-breadcrumb-item>服务类别</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 表单 -->
    <el-card shadow="always">
      <!-- 表头 -->
      <div slot="header">
        <el-form :inline="true" label-width="80px" class="demo-form-inline">
          <el-form-item label="分类名称:">
            <el-input placeholder="请输入分类名称" size="medium" v-model="typename"></el-input>
          </el-form-item>
          <el-form-item label="分类排序:">
            <el-input placeholder="请输入分类排序" size="medium" v-model="sort"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="medium" @click="save">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表体 -->
      <!-- 表格 -->
      <el-table border style="width: 100%" size="medium" :data="tableData">
        <el-table-column prop="typename" label="服务分类">
        </el-table-column>
        <el-table-column prop="sort" label="排序">
        </el-table-column>

        <el-table-column prop="address" label="操作" fixed="right" min-width="140">
          <template slot-scope="{row}">
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteById(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <!-- <el-pagination style="text-align: center;margin-top: 20px;" :current-page.sync="pageInfo.page"
        :page-sizes="[3, 5, 10, 20]" :page-size.sync="pageInfo.limit" layout="prev, pager, next,total,jumper,->, sizes"
        :total="pageInfo.total">
      </el-pagination> -->

    </el-card>



  </div>
</template>

<script>
import { nanoid } from 'nanoid'
export default {
  name: "ServiceType",
  data() {
    return {
      ServiceType: {},
      tableData: [],
      name: "",
      sort: "",
      typename: "",

    }
  },
  mounted() {
    this.getServiceTypeList();

  },
  methods: {
    async getServiceTypeList() {
      let res = await this.$API.CarService.reqServiceTypeList();
      if (res.code == 200) {
        this.tableData = res.data;
      } else {
        this.tableData = [];
        this.pageInfo.total = 0;
        this.$message({ message: '没有数据', type: 'error' })
      }
    },
    async save() {
      let { typename, sort } = this;
      let query = this.$QS.stringify({ typename, sort });
      let res = await this.$API.CarService.reqAddServiceManagerList(query);
      if (res.code == 200) {
        this.$message({ message: '添加成功', type: 'success' })
      }
      this.getServiceTypeList();
    },
    deleteById(id) {
      this.$confirm('确定删除该服务分类吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await this.$API.CarService.reqDeleteById(id);
        if (res.code == 200) {
          this.$message({ message: '删除成功', type: 'success' });
        };
        this.getServiceTypeList();
        this.$message({ type: 'success', message: '删除成功!' });
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' });
      });

    }

  }
}
</script>

<style scoped></style>